<template>
  <a-modal
    destroyOnClose
    title="选择云仓供货商"
    :zIndex="zIndex"
    v-model="value"
    :afterClose="closeModel"
    :width="500"
    @cancel="onCancel()"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :bodyStyle="{ maxHeight: '70vh', overflow: 'scroll' }"
  >
    <a-card>
      <a-row align="middle" style="margin-bottom: 10px">
        <a-space class="search-item"
          >名称：
          <a-input v-model="queryParam.name" placeholder="请填写搜索名称" />
        </a-space>
        <a-space class="search-item">
          <a-button @click="refresh" type="primary"> 搜索 </a-button>
        </a-space>
      </a-row>
      <a-row v-if="selectCloudPlatformList.length > 0" type="flex" align="middle" class="img-list">
        <img
          class="selectImg"
          v-for="(item, index) of selectCloudPlatformList"
          style="width: 30px; height: 30px; margin-right: 10px"
          :key="index"
          @click="delSelect(index)"
          :src="item.logo"
          alt=""
        />
      </a-row>
      <s-table ref="table" size="default" row-key="id" :columns="columns" :data="loadData">
        <template slot="name" slot-scope="name, item">
          <a-row>
            <a-space>
              <img style="width: 40px; height: 40px" :src="item.logo" alt="" />
              ID{{ item.id }}<span style="font-weight: bold">{{ name }}</span>
            </a-space>
          </a-row>
        </template>
        <a-space slot="action" slot-scope="text, item" v-if="showSelect(item)">
          <a-button @click="selectCloudPlatform(item)" size="small"> 选择 </a-button>
        </a-space>
      </s-table>
    </a-card>
    <a-row justify="end" type="flex" style="margin-top: 15px">
      <a-space>
        <a-button @click="onCancel"> 取消 </a-button>
        <a-button type="primary" @click="onOk"> 确认 </a-button>
      </a-space>
    </a-row>
  </a-modal>
</template>

<script>
import { supplierList as list } from '@/api/purchase/purchase'
import { STable } from '@/components'

const columns = [
  {
    title: '信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '40px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'SearchCloudPlatform',
  components: {
    STable,
  },
  data() {
    return {
      columns: columns,
      showModal: true,
      selectCloudPlatformList: [],
      loadData: (parameter) => {
        var newObj = {}
        parameter.page = parameter.pageNo
        parameter.limit = parameter.pageSize
        Object.assign(newObj, parameter, this.queryParam)
        return list(newObj).then((res) => {
          return {
            pageNo: res.data.page,
            totalCount: res.data.count,
            data: res.data.list,
          }
        })
      },
      queryParam: {
        name: '',
        cat_id: 0,
        status: -1,
        mch_id: 0,
      },
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000,
    },
    countNum: {
      type: Number,
      default: 0,
    },
    value: {
      type: Boolean,
      default: true,
    },
    cloudPlatform_id_list:'',
  },
  watch: {
    name: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal > 0) {
          this.queryParam.name = newVal
        }
      },
    },
  },
  created() {
    
  },
  methods: {
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    },
    onEdit(id) {
    },
    showSelect(item){
      if(this.cloudPlatform_id_list){
        var ids = JSON.parse(this.cloudPlatform_id_list);
        for(var i in ids){
          if(ids[i] == item.id){
            return false;
          }
        }
      }
      return true;
    },
    selectCloudPlatform(item) {
      if (this.countNum > 0 && this.selectCloudPlatformList.length >= this.countNum) {
        return false
      }
      var cloudPlatformInfo = {
        id: item.id,
        name: item.name,
        logo: item.logo,
      }
      for (var i = 0; i < this.selectCloudPlatformList.length; i++) {
        if (this.selectCloudPlatformList[i].id === cloudPlatformInfo.id) {
          return false
        }
      }
      this.selectCloudPlatformList.push(cloudPlatformInfo)
    },
    updateParam(value, type) {
      this.queryParam[type] = value
    },
    delSelect(index) {
      this.selectCloudPlatformList.splice(index, 1)
    },
    onCancel() {
      this.$emit('input', false)
    },
    onOk() {
      this.$emit('input', false)
      this.$emit('onOk', this.selectCloudPlatformList)
    },
    closeModel() {
      this.selectCloudPlatformList = []
    }
  },
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.selectImg:hover {
  opacity: 0.4;
}
.img-list {
  margin-bottom: 10px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  padding: 6px;
  position: sticky;
  top: -20px;
  z-index: 999999999;
}
</style>
